<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

        <style>

        * { margin: 0px;

        padding: 0px;

        }



        .animation_canvas{

        

        overflow: hidden;

        position: relative;

        width: 1150px; height: 500px;

        

        }

        

        /* Slider Panel */

        .slider_panel { width:5000px; position:relative; }

        .slider_image { float:left; width:1150px; height:400px; }

    

        /* Slider Text Panel */

        .slider_text_panel { position:absolute; top:200px; left:50px; }

        .slider_text { position:absolute; width:250px; height:150px; }

        

    	 /*Control panel*/

        .control_panel{
		margin-left:20%;
        position: absolute; top: 380px;

        left: 270px; height: 13px;

        overflow: hidden;

        }

        .control_button{

 		width: 12px; height: 45px;

        position: relative;

        float: left; cursor: pointer;

        background:url('/kiSunnyShop/jquery/img/pagination.png');

        }

        

        .control_button:hover{top:-0;}

        .control_button.active{top:-27px;}



        </style>

        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>

        <script>

        

        $(document).ready(function (){

        //초기 텍스트 위치를 지정합니다.

        $('.slider_text').css('left', -1150).each(function (index){

        $(this).attr('data-index', index);//data-index 라는 커스텀 속성을 넣습니다 그 값은 index로

        });

        

        //컨트롤 버튼의 클릭 리스너 지정 및 data-index 할당

        $('.control_button').each(function (index){

        $(this).attr('data-index', index);//data-index라는 커스텀 속성을 넣습니다. 그 값은 index

        });

        

        function moveSlider(index){

        //슬라이더를 이동합니다.

        var willMoveLeft = -(index*1150);

        $('.slider_panel').animate({left: willMoveLeft }, 'slow');

        

        //control_button에 active 클래스를 부여/제거합니다.

        $('.control_button[data-index=' + index + ']').addClass('active');//여기는 버튼을 누르면 파란색으로 변하게 함

        $('.control_button[data-index!=' + index + ']').removeClass('active');//나머지 속성은 하얀색으로 변하게함

        

        //글자를 이동합니다.

        $('.slider_text[data-index=' + index + ']').show().animate({

        left: 0

        }, 'slow');//왼쪽에서 글자가 나타나게 함.

        

        $('.slider_text[data-index!=' + index + ']').hide('slow', function(){

        $(this).css('left', -500);

        });//글자를 사라지게 하고 -300으로 보냄.

        }

        

        //초기 텍스트 위치 지정 및 data-index 할당

        $('.slider_text').css('left', -500).each(function (index){

        $(this).attr('data-index', index);

        });

        

        //컨트롤 버튼의 클릭 리스너 지정 및 data-index 할당

        $('.control_button').each(function (index){

        $(this).attr('data-index', index);

        }).click(function (){

        var index = $(this).attr('data-index');

        moveSlider(index);

        });

        

        //초기 슬라이더 위치 지정

        var randomNumber = Math.round(Math.random() * 4);

        moveSlider(randomNumber);

        });

        

        </script>

</head>

<body>



        <h1>Test Header</h1>

        <div class="animation_canvas">

        <div class="slider_panel">

        <img src="/kiSunnyShop/jquery/img/example-slide-1.jpg" class="slider_image"/>

            <img src="/kiSunnyShop/jquery/img/example-slide-2.jpg" class="slider_image"/>

            <img src="/kiSunnyShop/jquery/img/example-slide-3.jpg" class="slider_image"/>

            <img src="/kiSunnyShop/jquery/img/example-slide-4.jpg" class="slider_image"/>

        </div>

        

        <div class="slider_text_panel">

            <div class="slider_text">

                <h1>Lorem ipsum</h1>

                <p>Lorem ipsumdolorsitamet,consecteturadipiscingelit.</p>

            </div>

            <div class="slider_text">

                <h1>Nulla eget</h1>

                <p>Nulla egetsapienmauris,ornareelementumelit.</p>

            </div>

            <div class="slider_text">

                <h1>Quisque eleifend</h1>

                <p>Quisque eleifendaugueneclacuslobortisporta.</p>

            </div>

            <div class="slider_text">

                <h1>Donec</h1>

                <p>Donec a ligulalectus,euiaculisjusto.</p>

            </div>

            <div class="slider_text">

                <h1>Vivamus scelerisque</h1>

                <p>Vivamus scelerisquemaurisidnuncdictumsitamet.</p>

            </div>

        </div>       

        

        <div class="control_panel">

	        <div class="control_button"></div>
	
	        <div class="control_button"></div>
	
	        <div class="control_button"></div>
	
	        <div class="control_button"></div>
	
	        <div class="control_button"></div>

        </div>

        

        </div>

        <h1>Test Header</h1>

</body>

</html>
</html>